<template>
    <div class="goods-index">
        <!-- 头部添加 -->
        <header>
            <el-button color="#da9233">添加</el-button>
        </header>
        <main v-loading="loading">
            <el-card style="height: 100%">
                <el-table
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }"
                    max-height="480"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    ><el-table-column prop="cid" label="二级Id" width="180" />
                    <el-table-column
                        prop="goods_id"
                        label="商品Id"
                        width="220"
                    />
                    <el-table-column
                        prop="goods_name"
                        label="商品名"
                        width="180"
                    />
                    <el-table-column label="商品描述" width="180">
                        <template #default="scope"
                            ><el-text style="width: 180px" truncated>{{
                                scope.row.goods_desc
                            }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="goods_price"
                        label="商品价格"
                        width="180"
                    />
                    <el-table-column label="图片" width="120">
                        <template #default="scope"
                            ><el-image
                                style="width: 30px; height: 30px"
                                :src="scope.row.goods_picture"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default>
                            <el-button link type="primary" size="small"
                                >修改</el-button
                            >
                            <el-button link type="primary" size="small"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table></el-card
            >
        </main>
        <!-- 底部 -->
        <footer>
            <el-pagination
                layout="prev, pager, next"
                :total="tablePage.total"
                :current-page="tablePage.pageNum"
                :page-size="tablePage.pageSize"
                @current-change="handlePageChange"
            />
        </footer>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { findGoods } from '../../apis/goods'

const tableData = ref([])
const tablePage = reactive({
    pageNum: 1, // 第几页
    pageSize: 11, // 每页多少条
    total: 0, // 总记录数
})
let loading = ref(true)
onMounted(() => {
    findGoods().then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
})
const handlePageChange = currentPage => {
    loading.value = true
    tablePage.pageNum = currentPage
    findGoods(tablePage.pageNum).then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
    // 在此刷新数据
}
</script>

<style lang="scss" scoped>
.goods-index {
    header {
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    main {
        height: 500px;
    }
    footer {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
